<template>
  <div class="hotelpage">
    <h1 class="detail-baseinfo_name">{{title}}</h1>
      <br/>
    <i class="el-icon-location-information">酒店地址：{{location}}</i>
    <span>|</span><i class="el-icon-phone">酒店联系电话：{{phone}}</i>
      {{price}}
    <div class="price_container">
      <p class="price_price_box">
        <span class="price_price">￥590</span>
      </p>
      <el-button  @click="reservation_hote()" type="success" round>{{reservation}}</el-button>
    </div>
    <div>
      <h4>简介</h4>
      <p>{{brief}}</p>
    </div>
    <div class="flex">
    <div :style="'background-image: url('+imgUrl+');background-size:cover;width: 587px;height: 400px;margin: 10px;padding: 10px;float:left'" >

    </div>
      <div style="float: none;width: 500px;height: 400px">
    <div v-for="(item, index) in imgUrlChilder" :key="index" style="width: 120px;height: 120px;display: inline-flex;margin: 5px;padding: 5px;">
      <img :src="item" />
    </div>
      </div>

    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      brief: null,
      imgs: null,
      location: null,
      phone: null,
      price: null,
      title: null,
      reservation: null,
      pageID: null,
      imgUrl:null,
      imgUrlChilder:null,
    };
  },
  components: {},
  created: function() {
    this.pageID = this.$route.query.id;
    this.upData(this.pageID);
this.reservation = "登录后预定";
    var d = { id: this.pageID };
    this.$api.orderAPI
      .get_hotelReserve(d)
      .then(res => {
        const is = res.data.data;
        if (is == 0) {
          this.reservation = "预定";
        } else {
          this.reservation = "取消预定";
        }
      })
      .catch(err => {});
  },
  methods: {
    upData(id) {
      var d = { id: id };
      this.$api.hotelAPI.get_hotel(d).then(res => {
        this.brief = res.data.data.brief;
        this.imgs = res.data.data.imgs;
        this.imgUrl =this.imgs.slice(this.imgs.length - 1, 7);
        console.log(this.imgUrl);
        this.imgUrlChilder = this.imgs.slice( 0, 6);
        console.log(this.imgUrlChilder);
        this.location = res.data.data.location;
        this.phone = res.data.data.phone;
        this.price = res.data.data.price;
        this.title = res.data.data.title;
      });
    },
    reservation_hote() {
      var d = { id: this.pageID };
      this.$api.orderAPI
        .post_hotelReserve(d)
        .then(res => {
          const data = res.data.data;
          // var newObj = this.tickets[index];
          if (data == 1) {
            this.reservation = "取消预定";
          } else {
            this.reservation = "预定";
          }

          // this.$set(this.tickets, index, newObj);
        })
        .catch(err => {});
    }
  }
};
</script>

<style>

.hotelpage{
  padding-top: 10px;
}
.price_price_box {
  align-items: center;
  margin-bottom: 8px;
  line-height: 22px;
}
.price_price {
  font-weight: 700;
  font-size: 24px;
  color: #d82727;
  text-align: right;
  display: block;
}
.detail-baseinfo_name {
  font-size: 20px;
  color: #0f294d;
  display: inline;
  margin-right: 8px;
}
.price_select {
    padding: 8px 16px;
    background: #287dfa;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.price_container{
    height: 10px;
    width: 75px;
    margin: 0 100%;
}
.testb-hotel-info {
  display: flex;
  width: 1112px;
  height: 298px;
  margin: 16px 0;
}

.testb-hotel-detail-atlas_container {
  flex: 7;
  display: flex;
  width: 100%;
  position: relative;
}
.ep-container {
  flex: 3;
  padding-left: 8px;
  box-sizing: border-box;
}

.hotel-detail-atlas_box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.testb-hotel-detail-atlas_container .testb-hotel-detail-atlas_box .testb-hotel-detail-atlas_bigpic {
  position: relative;
  display: inline-block;
  width: 58.6%;
  height: 100%;
  cursor: pointer;
}
.testb-hotel-detail-atlas_container .testb-hotel-detail-atlas_box .testb-hotel-detail-atlas_childbox {
  display: inline-block;
  width: 41.4%;
  height: 100%;
}
.testb-hotel-detail-atlas_item {
  background-size: cover;
  cursor: pointer;
  width: 50%;
  height: 51.4%;
  float: left;
  padding-left: 8px;
  padding-bottom: 8px;
  box-sizing: border-box;
}
.m-img {
  display: inline-flex;
  opacity: 1;
  transition: all .45s cubic-bezier(.645,.045,.355,1) 0s;
  justify-content: center;
  align-items: center;
}
</style>
